<template>
  <view class="cascade-selection-main">
    <view
      class="select-title"
      :class="selectTitleClass"
    >
      <view
        v-for="(item, index) in campusStack"
        :key="index"
        class="select-title-item"
        @tap="handleToggle(index)"
      >
        {{ item.title }}
      </view>
      <view
        v-if="isShowSelectBtn"
        class="select-title-item active"
      >
        请选择
      </view>
    </view>
    <cityIndexes
      v-if="isShowCampus"
      :is-show-select-icon="true"
      :city-info="cityInfo"
      :list="list"
      @changeCity="handleChange"
    />
  </view>
</template>
<script>
import cityIndexes from "@/components/city-indexes/index";
const MAX_STACK_LEN = 3;
export default {
  components: {
    cityIndexes
  },
  props: {
    isShowCampus: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**已选校区，成都-区级-校区 */
    campusStack: {
      type: Array,
      default: () => []
    },
    cityInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isFullCampus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isAgainGetHeight: false
    };
  },
  computed: {
    /**是否显示已选择 */
    isShowSelectBtn() {
      return this.campusStack.length < MAX_STACK_LEN;
    },
    selectTitleClass() {
      return {
        "select-title-active": this.isFullCampus
      };
    }
  },
  watch: {
    list(c) {
      if (c.length) {
        this.isAgainGetHeight = true;
      }
    }
  },
  methods: {
    handleToggle(index) {
      this.$emit("toggle", index);
    },
    handleChange(data) {
      /**返回数据的类型 */
      const backSourceType = {
        0: "FIRST",
        1: "SECOND",
        2: "THIRD",
        3: "modify"
      };
      data.type = backSourceType[this.campusStack.length];
      console.log(data);
      this.$emit("change", data);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.cascade-selection-main {
  .select-title {
    padding: 16px 0;
    box-sizing: content-box;
    @include normal-flex(flex-start);
    @include base-text(44px, 32px, #606266, 400);
    &-item {
      margin-right: 64px;
      &:last-child {
        margin-right: 0;
        flex: 1;
        @include textEllipsis;
        text-align: left;
      }
    }
    .active {
      color: #ff8000;
    }
  }
  .select-title-active {
    view:last-child {
      color: #ff8000;
    }
  }
  .city-indexes-content {
    max-height: 670px;
  }
}
</style>
